interface Props {
	data: any;
}

import { Col, Descriptions, Row, Flex, Typography, Space, Input, Button, message } from "antd";
import styles from "./index.module.less";
import SuperTable from "@/components/SuperTable";
import { TABLE_COLUMNS, getTableColumns } from "./constant";
import { Link } from "react-router-dom";
import { map, join, isEmpty } from "lodash";
import { useState, useEffect } from "react";
import { useRequest } from "ahooks";
import { getAdminRemark, addAdminRemark, editAdminRemark } from "@/api/modules/transactionManagement";
import { handleGetUserInfo } from "..//../DeliverGoods/index";

const { Paragraph, Text } = Typography;

export default (props: Props) => {
	const { data } = props;
	const [isShowRemark, setIsShowRemark] = useState(false);
	const [remarkValue, setRemarkValue] = useState("");
	const { data: remarksData, runAsync: getRemarksList } = useRequest(getAdminRemark, { manual: true });
	const order_id = data?.order_id ?? "";
	console.log("=========data:", data, remarksData);
	const items = [
		{
			key: "1",
			label: "订单编号",
			children: (
				<Paragraph className={styles.copy} copyable={{ icon: <a>复制</a> }}>
					{data?.order_id}
				</Paragraph>
			)
		},
		{
			key: "2",
			label: "昵称",
			children: data?.userInfo?.username
		},
		{
			key: "name",
			label: "收件人",
			children: data?.receiver_info?.name
		},
		{
			key: "4",
			label: "微信交易号",
			children: data?.wx_transaction_id && (
				<Paragraph className={styles.copy} copyable={{ icon: <a>复制</a> }}>
					{data?.wx_transaction_id}
				</Paragraph>
			)
		},
		{
			key: "5",
			label: "联系电话",
			children: data?.userInfo?.mobile
		},
		{
			key: "mobile",
			label: "手机号码",
			children: data?.receiver_info?.mobile
		},
		{
			key: "7",
			label: "创建时间",
			children: data?.created_at,
			span: 1
		},
		{
			key: "11",
			label: "订单备注",
			children: data?.remark,
			span: 1
		},
		{
			key: "3",
			label: "收货地址",
			children: (
				<Text ellipsis={{ tooltip: true }}>
					{data?.receiver_info?.province}
					{data?.receiver_info?.city}
					{data?.receiver_info?.county}
					{data?.receiver_info?.address}
				</Text>
			)
		},
		// {
		// 	key: "8",
		// 	label: "微信号",
		// 	children: ""
		// },
		{
			key: "10",
			label: "付款时间",
			children: data?.pay_time,
			span: 2
		},
		{
			key: "6",
			label: "物流公司",
			children: join(map(data?.logisticsInfo, "delivery_name"), ",")
		},
		{
			key: "13",
			label: "优惠券ID",
			children: data?.district_code,
			span: 2
		},
		{
			key: "9",
			label: "运单号",
			span: 1,
			children: (
				<Flex style={{ width: "100%" }}>
					{!isEmpty(data?.logisticsInfo) && (
						<>
							<Paragraph ellipsis={{ tooltip: true, rows: 3 }}>
								<span>{join(map(data?.logisticsInfo, "waybill_id"), ",")}</span>
							</Paragraph>
							<Link style={{ flexShrink: 0, marginLeft: "10px" }} to={`/transaction/flow?order_id=${order_id}`}>
								查看物流信息
							</Link>
						</>
					)}
				</Flex>
			)
		}
	];

	const handleShowRemarkModal = () => {
		setIsShowRemark(true);
	};

	const handleSaveRemark = () => {
		if (!remarkValue.trim()) {
			message.error("请输入备注内容");
			return;
		}
		setIsShowRemark(false);
		if (remarksData?.data?.length > 0) {
			editAdminRemark({
				id: remarksData?.data[0]?.id,
				content: remarkValue
			});
		} else {
			addAdminRemark({
				order_id,
				content: remarkValue
			});
		}
	};

	const handleDeleteRemark = () => {
		setRemarkValue("");
		editAdminRemark({
			id: remarksData?.data[0]?.id,
			content: ""
		});
		setIsShowRemark(false);
	};

	useEffect(() => {
		data?.order_id &&
			getRemarksList({ order_id: data?.order_id }).then(res => {
				setRemarkValue(res?.data[0]?.content);
			});
	}, [data]);

	return (
		<div className={styles.container}>
			<div className={styles.title}>发货/退货信息</div>
			<div className={styles.deliveryInfo}>
				<Space direction="vertical" size={20}>
					<Space size={30}>
						<span className={styles.label}>我的发货信息</span>
						<Space size={20}>
							<span>{handleGetUserInfo(data?.sender_info)}</span>
						</Space>
					</Space>
					<Space size={30}>
						<span className={styles.label}>我的退货信息</span>
						<Space size={20}>
							<span>{handleGetUserInfo(data?.return_info)}</span>
						</Space>
					</Space>
				</Space>
			</div>
			<div className={styles.title}>订单信息</div>
			<div className={styles.content}>
				<Row>
					<Col span={8} className={styles.content_title}>
						交易信息
					</Col>
					<Col span={8} className={styles.content_title}>
						买家信息
					</Col>
					<Col span={8} className={styles.content_title}>
						物流信息
					</Col>
				</Row>
				<Descriptions items={items} contentStyle={{ backgroundColor: "transparent" }} />
				<div className={styles.remarkContainer}>
					<div className={styles.remarkTitle}>管理员备注</div>
					<Input
						placeholder="请输入"
						maxLength={300}
						count={{
							show: isShowRemark,
							max: 300
						}}
						value={remarkValue}
						onChange={e => setRemarkValue(e.target.value)}
						disabled={!isShowRemark}
					/>
					{isShowRemark ? (
						<>
							<Button className={styles.btnAdd} type="link" onClick={handleSaveRemark}>
								保存
							</Button>
						</>
					) : (
						<>
							<Button className={styles.btnAdd} type="link" onClick={handleShowRemarkModal}>
								{remarkValue ? "编辑" : "增加备注"}
							</Button>
							{remarkValue && (
								<Button className={styles.btnDelete} type="link" onClick={handleDeleteRemark}>
									删除
								</Button>
							)}
						</>
					)}
				</div>
			</div>
			<SuperTable columns={getTableColumns(data)} dataSource={data?.itemsList ?? []} pagination={false} />
		</div>
	);
};
